<template>
  <div class="page-car-list">
    <swipeout>
      <group>
        <swipeout-item transition-mode='follow'
                       :auto-close-on-button-click="true"
                       v-for='order in list'>
          <div slot='right-menu'>
            <swipeout-button type="warn" @click.native="delOrder(order.id)">
              删除
            </swipeout-button>
          </div>
          <div slot='content' class="vux-1px-t">
            <cell is-link
                  :title="order.subject"
            >
                <span slot="icon" class="ion-ios-copy-outline"
                      style="margin-right: 5px;font-size: 30px;line-height: 1;color: #999;align-self:flex-start"></span>
              <span slot="inline-desc" style="font-size: 12px;color: #aaa">
                章节名称：{{order.cha.title}} / 价格： ￥ {{order.cha.price / 100}}
                <br>
                 所属课程：{{order. course.title}}
                <br>
                  创建时间：{{order.t}}
                </span>
            </cell>
          </div>
        </swipeout-item>
      </group>
    </swipeout>

    <br>
    <div style="padding: 0 10px;">
      <x-button type="primary"
                @click.native="buy">
        <span class="ion-ios-cart"></span> 去结算
      </x-button>
    </div>
  </div>
</template>
<script>
import { Swipeout, SwipeoutItem, SwipeoutButton, Cell, CellBox, Group, XButton } from 'vux'
import service from '../models/services'
import moment from 'moment'

export default {
  data () {
    return {
      list: []
    }
  },
  methods: {
    getCarList () {
      this.list = []
      service.car.list()
      .then((res) => {
        const code = res.data.code
        if (code === 0) {
          this.list = res.data.result
          this.list.forEach((item) => {
            item.t = moment(item.createTime * 1000).format('YYYY-MM-DD')
            item.course = {}
            item.cha = {}
            service.course.get(item.cid, true)
            .then((r) => {
              if (r.data.code === 0) {
                item.course = r.data.result
              }
            })

            service.chapter.get(item.sid, true)
            .then((r) => {
              if (r.data.code === 0) {
                item.cha = r.data.result
              }
            })
          })
        }
      })
    },
    delOrder (no) {
      const self = this

      this.$vux.confirm.show({
        title: ' 警告',
        content: '您要删除该订单吗？',
        onShow () {
        },
        onHide () {
        },
        onCancel () {
        },
        onConfirm () {
          const toast = self.$vux.toast
          service.order.delete(no)
            .then((res) => {
              if (res.data.code === 0) {
                toast.show({
                  text: '删除成功'
                })
                self.getCarList()
              } else {
                toast.show({
                  type: 'warn',
                  text: '删除失败'
                })
              }
            })
        }
      })
    },
    buy () {
      this.$router.push({
        name: 'pay'
      })
    }
  },
  mounted () {
    this.getCarList()
  },
  components: {
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    CellBox,
    Group,
    Cell,
    XButton
  }
}
</script>
